<template>
  <div class="course_management">
    <!-- 版心 -->
    <div class="course_wrap">
      <!-- 头部 -->
      <div class="header">
        <div class="header_top">
          <el-button size="medium"><a :href="'http://yogahome.shop/yujiaextend/gymadmin/downloadYogaActionInfo?gymId='+gid+'&'+'starTime='+ starTime+'&'+'endTime='+endTime">下载课表</a></el-button>
          <el-button @click="newBuilt" size="medium">应用上周课表</el-button>
        </div>
        <div class="header_bottom">
          <div class="header_left">
            <span>场馆名称：</span>
            <el-select v-model="value"  @change="cx" placeholder="请选择">
              <el-option
                v-for="item in options9"
                :key="item.value"
                :label="item.label"
                :value="item.gym_name"
              ></el-option>
            </el-select>
          </div>
          <div class="header_right">
            <div class="header_data">
              <p>上周</p>
              <span><<</span>
              <button>2018-12-21</button>
              <span>>></span>
              <p>下周</p>
            </div>
            <div class="last_week">返回本周</div>
          </div>
        </div>
      </div>

      <!-- 头部结束 -->
      <!-- 日期添加课程 -->
      <div class="course_class">
        <ul class="course_data">
          <li v-for="(item,index) in week" :key="index"  :class="{'active':index%2 != 0}">
           <div class="course_li">
              <span>{{item.date}}</span>
            <font>{{item.week}}</font>

           </div>
           
           <div class="add">
             <!-- v-for="(list,index) in data" :key="index"  :class="{'active':index%2 != 0}" -->
          <ul v-for="(list,index) in item.actions" :key="index">
            <!-- :class="{'addactive':index%2 != 0}" -->
              <div class="add_success" :class="{'addactive':index%2 != 0}">
                <div class="success_top" @click.stop="success">
                   <p class="add_date">{{list.action_time | formatDate}}~{{list.create_at | formatDate}}</p>
                <p>{{list.action_name}}</p>
                <p>{{list.coach_name}}</p>
                <p>{{list.room}}</p>
                <div class="add_order">
                  <span>{{list.success_people}}人预约</span>
                </div>
                <p>人数限制{{list.min_people}}-{{list.max_people}}人</p>

                </div>
                <div class="success_shade" v-show="shadeActive" @click.stop="successHide">
                    <span>
                      <i class="el-icon-edit"></i>
                    </span>
                   <span>
                      <i class="el-icon-delete"></i>
                    </span>
                </div>
               
              </div>
           
          </ul>
           <li  @click.stop="addClass(index)" :class="{'active':index%2 != 0}" class="add_xixi">
              <i class="el-icon-circle-plus-outline"></i>
              <p>添加课程</p>
            </li>
        </div>
          </li>
        </ul>
        <!-- 添加课程 -->
        <div class="add">
          <ul v-for="(list,index) in data" :key="index"  :class="{'active':index%2 != 0}"
              >
              <div class="add_success" :class="{'addactive':index%2 != 0}">
                <div class="success_top" @click.stop="success">
                   <p class="add_date">07.45~08:45</p>
                <p>杠铃操</p>
                <p>张三老师</p>
                <p>操房</p>
                <div class="add_order">
                  <span>0人预约</span>
                  <span>0人上课</span>
                </div>
                <p>人数限制2-8人</p>

                </div>
                <div class="success_shade" v-show="shadeActive" @click.stop="successHide">
                    <span>
                      <i class="el-icon-edit"></i>
                    </span>
                   <span>
                      <i class="el-icon-delete"></i>
                    </span>
                </div>
               
              </div>
            <li  @click.stop="addClass(index)">
              <i class="el-icon-circle-plus-outline"></i>
              <p>{{list.text}}</p>
            </li>
           
          </ul>
        </div>
        <!-- 添加课程结束-->
      </div>
      <!-- 日期添加课程结束 -->
    </div>
    <!-- 版心结束 -->
    <!-- 添加课程弹窗 -->
    <div class="add_course" v-show="addActive">
      <div class="add_join">
        <div class="add_top">
          <p>添加课表</p>
          <span class="el-icon-circle-close" @click.stop="hide"></span>
        </div>
        <div class="add_bottom">
          <ul>
            <li>
              <div class="add_choose">
                <span>选择课程：</span>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <p>
                没有可选课程？
                <span>去添加课程模版>></span>
              </p>
            </li>
            <li>
              <div class="add_choose">
                <span>选择老师：</span>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button type="success" size="small" plain>
                  <i class="el-icon-plus"></i>添加老师
                </el-button>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>选择教室：</span>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button type="success" size="small" plain>
                  <i class="el-icon-plus"></i>添加教室
                </el-button>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>上课时间：</span>
                <el-time-picker
                  v-model="value2"
                  :picker-options="{
      selectableRange: '08:00:00 - 22:30:00'
    }"
                  placeholder="任意时间点"
                ></el-time-picker>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>结束时间：</span>
                <el-time-picker
                  v-model="value2"
                  :picker-options="{
      selectableRange: '08:00:00 - 22:30:00'
    }"
                  placeholder="任意时间点"
                ></el-time-picker>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>人数限制：</span>
                <el-input v-model="input" placeholder="最少" style="width: 22%"></el-input>
                <font>到</font>
                <el-input v-model="input" placeholder="最多" style="width: 22%;"></el-input>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>课程难度：</span>
                <el-rate v-model="value1"></el-rate>
              </div>
            </li>
            <li>
              <div class="add_choose">
                <span>课程颜色：</span>
                <el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
              </div>
            </li>
            <li class="add_img">
              <div class="add_choose">
                <span>课程图片：</span>
                <img src alt>
                <input type="file" class="file">
                <button>重新选择</button>
              </div>
            </li>
            <li class="add_img">
              <div class="add_choose">
                <span>课程图片：</span>
                <p class="add_word">已默认</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="add_submit" @click.stop="addSubmit">确认添加</div>
      </div>
    </div>
    <!-- 添加课程弹窗结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value:'',
      // data: [
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   },
      //   {
      //     text: "添加课程"
      //   }
      // ],
      value: "",
      weekArr:"",
      input:'',
      value1: 3,
      week:'',
      options9:'',
      gid:'',
      value2: new Date(),
      color5: "rgba(255, 69, 0, 0.68)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      addActive:false,
      shadeActive:false,
      starTime:'',
      starTime:''
    };
  },
  created(){
    this.ajax()
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return h + ":" + m;
    }
  },
  methods: {
    ajax(gid){
      var d=new Date()
      var year = d.getFullYear();
      var month = d.getMonth();
      var day = d.getDate();
      var hours = d.getHours();
      var min = d.getMinutes();
      var times=year+'-'+(Number(month)+1)+'-'+day+' '+hours+':'+min
        // let obj = {
        //   gymId:gid,
        //   dateTime:times
        // }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("yujiaextend/gymadmin/findAllGymBySuperAdmin", qs.stringify(), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(response) {
            _this.options9=response.data.data
            console.log(response.data.data)
            if(_this.gid == ''){
              _this.gid=response.data.data[0].id
            }
             let obj = {
              gymId:_this.gid,
              dateTime:times
            }
             let qs = require("qs");
            _this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymActionBySuperAdmin", qs.stringify(obj), {
                headers: {
                "Content-Type": "application/x-www-form-urlencoded"
                }
            })
            .then((response) =>{
              _this.week=response.data.data
              _this.endTime=response.data.data[6].date
                _this.starTime=response.data.data[0].date
            })
            .catch(function(error) {
                console.log(error);
            });
    
          })
          .catch(function(error) {
              console.log(error);
          });
    },
    cx(){
      var arr=this.options9
      for (var i=0;i<arr.length;i++){
        if(this.value == arr[i].gym_name){
          var gid=arr[i].id
        }
      }
      this.gid=gid
      this.ajax()
    },
    newBuilt(){
            let obj = {
              gymId:this.gid,
              dateTime:this.starTime,
            }
             let _this = this;
             let qs = require("qs");
              _this.$axios.post("/yujiaextend/gymadmin/copyLastWeebYogaGymActionBySuperAdmin", qs.stringify(obj), {
                headers: {
                "Content-Type": "application/x-www-form-urlencoded"
                }
              })
              .then(function(response) {
                
              })
    },
    addClass(index) {
      console.log(index);
      this.addActive = true;
    },
    hide(){
        this.addActive = false
    },
    addSubmit(){
      this.addActive = false
       this.$message({
           showClose: true,
          message: '恭喜你添加成功',
          type: 'success'
        });
    },
    success(){
      this.shadeActive = true;
    },
    successHide(){
      this.shadeActive =false
    }
  }
};
</script>
<style scoped>
.course_management {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 2;
}
/* 版心 */
.course_wrap {
  width: 100%;
  height: 100%;
  margin-left: 3%;
}
/* 版心结束 */
.active {
  background: #f8f8f8 !important;
}
.addactive {
  background: #aed5a0 !important;
}
/* 头部 */
.course_wrap .header {
  width: 100%;

  margin-top: 35px;
}
.course_wrap .header .header_top .el-button--medium:first-child {
  width: 90px;

  height: 34px;

  background: #2871e9;
}

.course_wrap .header .header_top .el-button--medium:nth-child(2) {
  background: #0947ae;
}
.el-button {
  color: #fff;
}
.course_wrap .header .header_bottom {
  width: 100%;
  margin-top: 15px;
  display: flex;

  align-items: center;

  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #cdcdcd;
}
.course_wrap .header .header_bottom .header_left span {
  font-size: 15px;
  color: #000000;
}
.course_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 20%;
}
.course_wrap .header .header_bottom .header_right .header_data {
  display: flex;
  align-items: center;
  margin-right: 35px;
}
.course_wrap .header .header_bottom .header_right .header_data p {
  font-size: 12px;
}
.course_wrap .header .header_bottom .header_right .header_data span {
  font-size: 12px;
}
.course_wrap .header .header_bottom .header_right .header_data button {
  padding: 4px 15px;
  border: none;
  outline: none;
  border-radius: 6px;
  background: #cdcdcd;
  color: #000000;
  font-size: 14px;
  margin: 0 15px;
}
.course_wrap .header .header_bottom .header_right .last_week {
  font-size: 14px;
  color: #286fe6;
  font-weight: bold;
  border-bottom: 1px solid #286fe6;
}
/* 头部结束 */
/* 日期添加课程 */
.course_class {
  width: 80%;
  margin-top: 20px;
}
.course_class .course_data {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
 
}
.course_class .course_data>li {
  width: 14.28%;
  font-size: 14px;
  color: #000000;
  font-weight: bold;
}
.course_class .course_data>li .course_li{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #ddeafe;

}
.course_class .course_data>li .course_li font{
  margin-left: 3px;
}
.course_class .course_data>li .add{
 width: 100%;
    /* display: flex;
  align-items: center; */
}
.course_class .course_data>li .add>ul{
  width: 100%;
   background: #fff;

}
.course_class .course_data>li .add>ul>li{
   width: 100%;
  height: 180px;
  padding-top: 56px;
  text-align: center;

}
.course_class .course_data>li .add>ul>li i{
   font-size: 20px;
  color: #cdcdcd;
}
.course_class .course_data>li .add>ul>li p{
   font-size: 14px;
  color: #cdcdcd;
  margin-top: 5px;
}
.course_class .course_data>li .add .add_xixi{
   width: 100%;
  height: 180px;
  padding-top: 56px;
  text-align: center;

}
.course_class .course_data>li .add .add_xixi i{
   font-size: 20px;
  color: #cdcdcd;
}
.course_class .course_data>li .add .add_xixi p{
    font-size: 14px;
  color: #cdcdcd;
  margin-top: 5px;
}
/* .course_class .add > ul {
  width: 14.48%;
    background: #fff;

} */
/* .course_class .add > ul li {
  width: 100%;
  height: 180px;
  padding-top: 56px;
  text-align: center;

} */
/* .course_class .add > ul li i {
  font-size: 20px;
  color: #cdcdcd;
} */
/* .course_class .add > ul li p {
  font-size: 14px;
  color: #cdcdcd;
  margin-top: 5px;
} */
.course_class .add > ul .add_success {
  width: 100%;
  height: 180px;
  text-align: center;
  background: #cacbf0;
  position: relative;
  z-index: 1
}
.course_class .add > ul .add_success .success_top {
  width: 100%;
  height: 180px;
}
.course_class .add > ul .add_success  .success_top .add_date{
  color: #0947ae;
  font-weight: bold;
}
.course_class .add > ul .add_success .success_top p{
  padding-top: 7px;
    font-size: 13px;
     color: #000000;
}
.course_class .add > ul .add_success .success_top p:nth-child(2){
  font-weight: bold;
}
.course_class .add > ul .add_success  .success_top .add_order{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:7px;
}
.course_class .add > ul .add_success  .success_top .add_order span{
  font-size: 13px;
  color: #010101;
}
.course_class .add > ul .add_success .success_shade{
  width: 100%;
  height: 180px;
  position: absolute;
  left:0;
  top: 0;
  z-index: 2;
  background:rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center
}
.course_class .add > ul .add_success .success_shade span{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #aaaaaa;
  line-height: 32px;
}
.course_class .add > ul .add_success .success_shade span i{
  color: #ffffff;
}
.course_class .add > ul .add_success .success_shade span:nth-child(2){
  margin-left: 30px;
}
/* 日期添加课程结束 */
/* 添加课程弹窗 */
.add_course {
  width: 100%;

  height: 100%;
  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}
.add_course .add_join {
  width: 560px;

  background: #fff;

  margin: 0 auto;
  margin-top: 35px;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}
.add_course .add_join .add_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}
.add_course .add_join .add_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}
.add_course .add_join .add_top span {
  font-size: 18px;

  display: inline-block;
}
.add_course .add_join .add_bottom {
  width: 100%;
}
.add_course .add_join .add_bottom ul {
  width: 100%;
}
.add_course .add_join .add_bottom ul li {
  width: 100%;
  margin-top: 30px;
}
.add_course .add_join .add_bottom ul li .add_choose {
  width: 100%;
  display: flex;
  align-items: center;
}
.add_course .add_join .add_bottom ul li .add_choose span {
  width: 20%;
  font-size: 14px;
  color: #000000;
}
.add_course .add_join .add_bottom ul li .add_choose .el-select {
  width: 40%;
}
.add_course .add_join .add_bottom ul li p {
  padding-left: 20%;
  margin-top: 10px;
  font-size: 14px;
  color: #808080;
}
.add_course .add_join .add_bottom ul li p span {
  font-size: 14px;
  color: #ae0909;
}
.add_course
  .add_join
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain {
  margin-left: 20px;
  background: #fff;
  color: #286fe6;
  font-size: 14px;
  border: 1px solid #286fe6;
  padding: 8px 8px;
}
.add_course
  .add_join
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain
  i {
  font-size: 12px;
}
.add_course .add_join .add_bottom ul li .add_choose .el-date-editor {
  width: 40%;
}

.add_course .add_join .add_bottom ul li .add_choose font {
  font-size: 16px;
  color: #000000;
  margin: 0 30px;
}
.add_course .add_join .add_bottom ul .add_img {
  margin-top: 20px;
}
.add_course .add_join .add_bottom ul .add_img .add_choose {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.add_course .add_join .add_bottom ul .add_img .add_choose img {
  background: #444444;
}
.add_course .add_join .add_bottom ul .add_img .add_choose .file {
  width: 80px;
  height: 30px;
  position: absolute;
  left: 52%;
  bottom: 0;
  outline: none;
  border: none;
  opacity: 0;
}
.add_course .add_join .add_bottom ul .add_img .add_choose button {
  width: 80px;
  height: 30px;
  margin-left: 22px;
  border-radius: 4px;
  border: 1px solid #286fe6;
  font-size: 14px;
  outline: none;
  background: #fff;
  color: #286fe6;
}
.add_course .add_join .add_bottom ul li .add_choose img {
  width: 130px;
  height: 90px;
}
.add_course .add_join .add_bottom ul li .add_choose .add_word {
  width: 80%;
  text-align: left;
  font-size: 16px;
  color: #286fe6;
  padding-left: 0;
}
.add_course .add_join .add_submit {
  width: 56%;

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  text-align: center;

  background: #2f7dfe;

  border-radius: 4px;

  margin-top: 30px;

  font-size: 16px;

  color: #fff;
}
/* 添加课程弹窗结束 */
</style>


